<template>
    <div class="registerWrap">
        <loginHeader></loginHeader>
        <div class="registerContent">
            <!--logo部分-->
            <div class="logo">
                <img class="logo" src="../../assets/img/login/LoginLOGO.png" alt="">
                <p class="headerTxt">用户注册</p>
            </div>
            <div>
                <!------------------------------------步骤集合List-->
                <div class="conList">
                    <div :class="index > 0? 'conListDivBorder': ''"><span :class="index > 0? 'conListNumS conListNum': 'conListNum'">1</span><span :class="index > 0? 'conListTxtS conListTxt': 'conListTxt'">绑定手机号</span></div>
                    <div :class="{conListDivBorder : index > 1}"><span :class="index > 1? 'conListNumS conListNum': 'conListNum'">2</span><span :class="index > 1? 'conListTxtS conListTxt': 'conListTxt'">填写账号信息</span></div>
                    <div :class="{conListDivBorder : index > 2}"><span :class="index > 2? 'conListNumS conListNum': 'conListNum'">3</span><span :class="index > 2? 'conListTxtS conListTxt': 'conListTxt'">设置支付方式</span></div>
                    <div :class="{conListDivBorder : index > 3}"><span :class="index > 3? 'conListNumS conListNum': 'conListNum'">√</span><span :class="index > 3? 'conListTxtS conListTxt': 'conListTxt'">注册成功</span></div>
                </div>
                <div class="conListContent">
                    <router-view></router-view>
                </div>
            </div>
        </div>
        <loginFooter></loginFooter>
    </div>
</template>

<script>
    import  loginHeader  from "./../login/LoginHeader";
    import  loginFooter  from "./../login/LoginFooter";
    export default {
        name: "index",
        components:{
            loginHeader,
            loginFooter
        },
        data(){
            return {
                // 当前所在步骤
                index: 1,
            }
        },
        methods:{
            indexS(index) {
                // childValue就是子组件传过来的值
                console.log("aa"+ index);
                this.index = index;
            },
            // 设置可以监听路由name的函数,保持页面状态
            watchRoute(routeName){
                // 获取当前路由name,改变注册流程步骤
                switch(routeName) {
                    // 流量中心
                    case "registerOne":
                        this.index = 1;
                        break;
                    // 访客中心
                    case "registerTwo":
                        this.index = 2;
                        break;
                    // 交易中心
                    case "registerThree":
                        this.index = 3;
                        break;
                    // 成交中心
                    case "registerFour":
                        this.index = 4;
                        break;
                    default:
                }
            }
        },
        watch:{
            // 监听路由name
            $route(to,from){
                console.log(this.$route.name);
                this.watchRoute(this.$route.name);
            }
        },
        mounted(){
            console.log("aa"+ this.index);
            // 根据本地存储里面的步骤一的信息判断是否保留在当前步骤
            if(localStorage.getItem("RegisterIndex")){
                this.index = localStorage.getItem("RegisterIndex");
            }else{
                this.index = 1;
            }
        }
    }
</script>

<style scoped>
    .registerWrap{
        overflow: hidden;
    }
    *{
        font-family: "注册页字体";
    }
    /*中心内容*/
    .registerContent{
        width: 1200px;
        height: 713px;
        margin: 0 auto;
        padding: 0;
        overflow: hidden;
    }
    .logo{
        width: 1200px;
        height: 90px;
        margin: 0 auto;
        background: #ffffff;
    }
    .logo .logo{
        width: 61px;
        height: 56px;
        margin-top: 19px;
        float: left;
    }
    .logo .headerTxt{
        float: left;
        font-size:26px;
        font-family: 微软雅黑;
        font-weight:500;
        line-height: 120px;
        margin-left: 10px;
        color:rgba(51,51,51,1);
    }
    .steps{
        border-top: 1px solid #E6E6E6;
    }
    /*步骤条*/
    .conList{
        width: 720px;
        display: flex;
        justify-content: space-around;
        margin: 0 auto -2px;
    }
    .conList div{
        width: 180px;
        height: 50px;
        line-height: 50px;
        text-align: center;
    }
    .conListNum{
        display: inline-block;
        width: 24px;
        height: 24px;
        font-size: 18px;
        text-align: center;
        line-height: 24px;
        color: #ffffff;
        border-radius: 12px;
        margin-right: 10px;
        background: #B3B3B3;
    }
    .conListTxt{
        font-size: 17px;
        color: #999999;
        font-weight: 500;
    }
    /*步骤选中*/
    .conListNumS{
        background: #EF3015;
    }
    .conListTxtS{
        color: #333333;
        font-size:17px;
        font-weight: 600;
    }
    /*步骤条下边框*/
    .conListDivBorder{
        border-bottom: 2px solid #EF3015;
    }
    .conListContent{
        border-top: 1px solid #E6E6E6;
    }
</style>
